<template>
  <div class="">
    <div>
      <ve-pie :data="chartData" :extend="pieExtend"></ve-pie>
      <ve-map :data="mapData" :extend="mapExtend"></ve-map>
    </div>
  </div>
</template>
 
<script>
import { getStatDataApi } from "../../request/api";
export default {
  data() {
    this.chartSettings = {};
    return {
      // 图标数据
      chartData: {},

      //   map数据
      mapData: {},
      //
      pieExtend: {
        series: {
          radius: ["30%", "55%"],
          center: ["30%", "50%"],
        },
        legend: {
          right: 30,
          top: 20,
          width: 300,
          height: 100,
          orient: "vertical",
        },
      },
      mapExtend: {
        legend: {
          show: false,
        },
        tooltip: {
          formatter: "{b0}<br />销量:{c0}",
        },
        visualMap: {
          type: "continuous",
          min: 0,
          max: 1000000,
          inRange: {
            color: ["#FFFFFF", "#FA8072", "#FF4500", "#A52A2A"],
          },
          show: true,
        },
        series: {
          type: "map",
          aspectScale: 0.9,
          zoom: 1.2,
          showLegendSymbol: false,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      },
    };
  },
  created() {
    getStatDataApi().then((res) => {
      console.log(res);
      if (res.errno == 0) {
        this.chartData = {
          columns: ["name", "sale_today"],
          rows: res.data.salePie,
        };
        this.mapData = {
          columns: ["areaName", "saleNum"],
          rows: res.data.saleMap,
        };
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
</style>